<!-- 图标展示 -->
<template>
	<transition name="show">
		<div class="count">
			<div class="my-wrap">
				<div class="chart">
					<p class="tit"><span>图表类型</span></p>
					<div class="main">
						<mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
					</div>							
				</div>
			</div>
			<open-close @getGis="getGIS"></open-close>
		</div>
	</transition>
</template>


<script>

import openClose from '../openClose/openClose'    // 弹出层打开关闭按钮
import GIS from '../GIS.js'

export default {
	data(){
		return {
			slots: [
				{
				  values: ['折线图', '柱状图', '统计饼图', '散点图', '轮播图']
				}
			],
			count: '折线图'
		}
	},
	components: {   // 组件
		openClose
	},
	methods: {    // 方法
		getGIS(){  // 确定单击渲染GIS
			console.log("图标展示")
			GIS.countGIS(this.count)
		},	
		onValuesChange(picker,index){  // 图表类型被滑动
			this.count = index[0]  // 记录选中的图标类型
		}	
	}
}

</script>


<style lang="less" scoped>

.show-enter{
	transform: translateX(100%);
	opacity: 0;
}
.show-enter-to{
	transform: translateX(0%);
	opacity: 1;
}
.show-leave{
	transform: translateX(0%);
	opacity: 1;
}
.show-leave-to{
	transform: translateX(-100%);
	opacity: 0;
}

.show-enter-active,.show-leave-active{
    transition: all 0.5s;
}
.count{
	width: 100%;
	height: 100%;
	position: fixed;
	background: rgba(0,0,0,.7);
	top: 0;
	left: 0;
	z-index: 101;
	overflow: hidden;
	.my-wrap{
		height: calc(~"100% - 130px");
		overflow: hidden;
		.chart{
			padding: 80px 30px 30px 30px;
			.tit{
				span{
					color: #fff;
					font-size: 14px;
					font-family: Microsoft YaHei;
					display: inline-block;
					line-height: 22px;
					height: 22px;
					border-radius: 12px;
					border: 1px solid rgba(255,255,255,0.3);
					padding: 0 10px;
				}
			}
			.main{
				padding: 0 30px;
			}
		}
	}
}


</style>